<template>
    <editor-content :editor="editor" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-3'

const props = defineProps<{
    content?: string,
}>()

const editor = ref<Editor>();


onMounted(() => {
    editor.value = new Editor({
        extensions: [
            StarterKit,
        ],
        content: props.content,
    })
    editor.value.contentEditable = false;
})

// 监听 props.content 的变化
watch(() => props.content, (newValue, oldValue) => {
        // 在值发生变化时更新编辑器内容
        if (editor.value) {
            editor.value.commands.setContent(newValue);
        }
    });

onBeforeUnmount(() => {
    editor.value.destroy()
})

</script>

<style lang="scss">
/* Basic editor styles */
.tiptap {
    >*+* {
        margin-top: 0.75em;
    }

    ul,
    ol {
        padding: 0 1rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1;
    }

    code {
        background-color: rgba(#616161, 0.1);
        color: #616161;
    }

    pre {
        background: #0D0D0D;
        color: #FFF;
        font-family: 'JetBrainsMono', monospace;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;

        code {
            color: inherit;
            padding: 0;
            background: none;
            font-size: 0.8rem;
        }
    }

    img {
        max-width: 100%;
        height: auto;
    }

    blockquote {
        padding-left: 1rem;
        border-left: 2px solid rgba(#0D0D0D, 0.1);
    }

    hr {
        border: none;
        border-top: 2px solid rgba(#0D0D0D, 0.1);
        margin: 2rem 0;
    }
}
</style>